/*
 * @Author: your name
 * @Date: 2020-07-27 22:33:29
 * @LastEditTime: 2021-08-01 21:54:14
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \react-hooks-app\src\compontent\count.js
 */

  import React,{useState,useEffect} from 'react'

  import { BrowserRouter as Router, Route,Link, Switch} from 'react-router-dom'


  import UseEffectDemo from './useEffectDemo'
  function Count(){
    const [count,setConut] = useState(0)
    const [demoCount,setdemoCount] = useState(2)

    //组件挂载时  组件更新时
    useEffect(()=>{
      console.log('count useEffect')
    })

    function add(){
      if(count === 5 ){
        setdemoCount(3)
      }
      setConut( count + 1)
      console.log(count);
    }
    console.log('count reding ...')
    return (
      <>
        <div>
          <p>you clied {count} times</p>
          <button onClick={add}>点击</button>
        </div>
        <UseEffectDemo count={count} demoCount={demoCount}></UseEffectDemo>
        <Router>
            <ul>
              <li><Link to="/">首页</Link></li>
              <li><Link to="/list">list</Link></li>
            </ul>
            <Switch>
                <Route path="/" exact component={IndexPage}></Route>
                <Route path="/list" exact component={ListPage}></Route>
            </Switch>
        </Router>
      </>
    )
  }

 const  IndexPage = ()=>{

  useEffect(()=>{
    console.log('首页挂载后 useEffect =>老弟 你来了！index页面 ')
    return ()=>{
      console.log('首页销毁 useEffect =>老弟 你走了！index页面 ')
    }
  },[])

  useEffect(()=>{
    console.log('index..... ')
  })

  console.log("index reding...")
   return (

    <div>首页</div>
   )
 }

 const  ListPage = ()=>{
  useEffect(()=>{
    console.log('列表 useEffect =>老弟 你来了 listPage 页面 ')
  })
  return (<div>listPage</div>)
}
  export default Count;
